<template>
  <div class="all">
    <div class="head">
      <div class="headclick" @click="back">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span class="text-large font-600 mr-3">接报创建</span>
      </div>
      <div class="selfclick" @click="self">
        <img src="../../assets/user.png" style="width: 25px" />
      </div>
    </div>
    <div class="main">
      <el-form style="max-width: 600px" status-icon label-width="auto">
        <el-form-item
          label="接报名称"
          prop="pass"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input autocomplete="off" v-model="reportForm.reportName" />
        </el-form-item>

        <el-form-item
          label="报警人员"
          prop="checkPass"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input autocomplete="off" v-model="reportForm.reporter" />
        </el-form-item>

        <el-form-item
          label="报警人电话"
          prop="age"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input autocomplete="off" v-model="reportForm.reporterPhone" />
        </el-form-item>
        <el-form-item
          label="事件类型"
          v-model="eType"
          prop="checkPass"
          style="font-weight: bold; font-size: 16px; width: 240px"
        >
          <el-select
            placeholder="请选择事件类型"
            v-model="reportForm.eventType"
            style="font-weight: lighter; font-size: 16px; width: 240px"
          >
            <el-option
              v-for="type in types"
              :key="type"
              :label="type"
              :value="type"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="报警时间"
          prop="age"
          style="font-weight: bold; font-size: 16px"
        >
          <el-date-picker
            type="datetime"
            placeholder="选择时间"
            style="width: 180px"
            v-model="reportForm.reportTime"
          />
        </el-form-item>

        <el-form-item
          label="企业编号"
          prop="age"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input autocomplete="off" v-model="reportForm.enterpriseID" />
        </el-form-item>
        <el-form-item
          label="事件编号"
          prop="age"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input autocomplete="off" v-model="reportForm.eventID" />
        </el-form-item>

        <el-form-item
          label="备注信息"
          prop="age"
          style="font-weight: bold; font-size: 16px"
        >
          <el-input
            autocomplete="off"
            type="textarea"
            v-model="reportForm.remark"
          />
        </el-form-item>
        <el-form-item>
          <div style="margin-left: 12px">
            <el-button type="primary" style="width: 370px" @click="submit">
              提交接报
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject } from "vue";
import { ElMessageBox, ElLoading, ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const types = ref([]);
const eType = ref("");
const axios = inject("axios");
const reportForm = ref({
  reportName: "",
  reporter: "",
  reporterPhone: "",
  reportTime: "",
  eventType: "",
  enterpriseID: "",
  eventID: "",
  eventLevel: "",
  remark: "",
});
const res = ref(0);
const worker = ref({});
const reportNum = ref(0);
worker.value = JSON.parse(sessionStorage.getItem("user"))._value;
console.log(worker.value.userName);


const submit = async() => {
  console.log(reportForm.value.reporterPhone);

 await axios
    .post("/Worker/getReporter", {
      reporterPhone: reportForm.value.reporterPhone,
    })
    .then((response) => {
      reportNum.value = response.data;
      console.log(reportNum.value);
    })
    .catch((error) => {
      console.log(error);
    });
  if (reportNum.value == 0) {
    await axios
      .post("/Worker/newReporterInfo", {
        reporter: reportForm.value.reporter,
        reporterPhone: reportForm.value.reporterPhone,
      })
      .then((response) => {
        res.value = response.data;
        console.log(res.value);

        if (res.value == 1) {
          axios
            .post("/Worker/newReportInfo", {
              lastUpdater: worker.value.userName,
              reportName: reportForm.value.reportName,
              reporterPhone: reportForm.value.reporterPhone,
              reportTime: reportForm.value.reportTime,
              enterpriseID: reportForm.value.enterpriseID,
              eventID: reportForm.value.eventID,
              remark: reportForm.value.remark,
              reportState: "待审批",
              lastUpdateTime: reportForm.value.reportTime,
            })
            .then((response) => {
              res.value = response.data;
              console.log(res.value);
            })
            .catch((error) => {
              console.log(error);
            });

          if (res.value == 1) {
            ElMessage({
              message: "接报提交成功！",
              type: "success",
              plain: true,
              duration: 2000,
            });
            setTimeout(doSomethingAfterOneSecond, 2000);
          }
        }
      })
      .catch(() => {
        ElMessage({
          message: "接报提交失败！",
          type: "error",
          plain: true,
          duration: 2000,
        });
      });
  } else if(reportNum.value == 1){
    await  axios
      .post("/Worker/newReportInfo", {
        lastUpdater: worker.value.userName,
        reportName: reportForm.value.reportName,
        reporterPhone: reportForm.value.reporterPhone,
        reportTime: reportForm.value.reportTime,
        enterpriseID: reportForm.value.enterpriseID,
        eventID: reportForm.value.eventID,
        remark: reportForm.value.remark,
        reportState: "待审批",
        lastUpdateTime: reportForm.value.reportTime,
      })
      .then((response) => {
        res.value = response.data;
        console.log(res.value);
      })
      .catch((error) => {
        console.log(error);
      });

    if (res.value == 1) {
      ElMessage({
        message: "接报提交成功！",
        type: "success",
        plain: true,
        duration: 2000,
      });
      setTimeout(doSomethingAfterOneSecond, 2000);
    }
  }
};
const doSomethingAfterOneSecond = () => {
  back();
};
const init = () => {
  axios
    .post("/Worker/listAllEventType", {
      eventType: eType.value,
    })
    .then((response) => {
      types.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const refresh = () => {
  init();
};
const back = () => {
  router.go(-1);
};
const self = () => {
  router.push("/workerMainPage/workerSelfPage");
};
</script>

<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.row {
  display: flex;
  justify-content: space-between;
}
.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}
.scrollbar-demo-item {
  height: 130px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.main {
  margin: 20px;
}
</style>